<template>
  <div class="homeinfo">
    <div class="w">
      <el-breadcrumb separator-class="el-icon-arrow-right" id="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/classify' }"
          >房屋列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>房屋列详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <h3 class="title">地产详情</h3>
        <div class="info">
          <el-row type="flex" justify="center">
            <el-col :span="15">
              <h4 class="demonstration">{{ homeInfoData.title }}</h4>
              <el-image :src="homeInfoData.image || ''" fit="fit"></el-image
            ></el-col>
<!-- 缩略图 -->
            <el-col :span="8">
              <div>
                <el-row class="thumbnail">
                  <el-col :span="24">
                    <el-image
                      v-for="(item, index) in homeInfoData.photos"
                      :key="index"
                      :src="item"
                      fit="cover"
                      :preview-src-list="homeInfoData.photos"
                    >
                      ></el-image
                    >
                  </el-col>
                </el-row>
                <div class="price">
                  价格：<span>{{ homeInfoData.price }}</span>
                </div>
              </div>

              <div class="personage">
                <el-image :src="agent ? agent.image : no" id="avatar"></el-image>
                <div class="block">
                  <div>
                    <div>客户经理：{{ agent ? agent.name : no }}</div>
                    <div>手机号码：{{ agent ? agent.phone : no }}</div>
                  </div>
                  <div>介绍：{{ agent ? agent.desc : no }}</div>
                  <div>地址：{{ agent ? agent.address : no }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="homeIntroduce">
            <h4>房产介绍:</h4>
            <p v-html="homeInfoData.content"></p>
            <p>
              华夏房地产有限公司是一家集投资规划、开发建设为一体的综合房地产开发企业，产品覆盖多层住宅、高层住宅、花园洋房、别墅、商住楼等多种形式，特征集房地产宣传文案。要求主题鲜明，作品能体现“稳健、内敛、务实、共赢”的企业作风；内涵深刻，立意深远、但不能大而空，需要易于落地；信息传递清晰准确，易认易记，说服力强，符合行业特点。
              经过举办征集活动，小编特选摘了部分精彩应征作品予以展示，以供品鉴（仅限参考）：
              1、胸怀天下，务实民生；巍巍华夏，你我共筑。
              2、建大厦迎六十国庆，讲诚信赞千年华夏。
              3、华夏地产：多重选择，多重保证。
              4、土木铺就成功路，诚信打造黄金屋。
              5、闹市中的世外桃源，宁静的心灵居所。
              6、买房子，到华夏，风吹雨打都不怕。
              7、静享繁华是华夏，享受人生在华夏。
              8、为飘荡的心找个家，尽在华夏——华夏地产。
              9、选择华夏地产，你永远不会有后悔的一天。
              10、丰收秋华，源于阳春盛夏的稳健。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { homeInfo } from "@/api/home";
export default {
  data() {
    return {
      homeInfoData: {},
      agent: {},
      no: "",
    };
  },
  created() {
    this.homeInfo();
  },
  methods: {
    async homeInfo() {
      const id = this.$route.query.id;
      const res = await homeInfo(id);
      console.log("房产详情", res);
      this.homeInfoData = res.data;
      const { agent } = this.homeInfoData;
      this.agent = agent;
    },
  },
};
</script>

<style lang="less" scoped>
.homeinfo {
  background-color: #ebeef53b;
}
.w {
  margin: 0 auto;
  width: 1226px;
  padding: 15px 0px;
}
// 面包屑
/deep/ #breadcrumb {
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: skyblue !important;
    }
  }
}
// 标题
.title {
  color: skyblue;
}
// 主版
.info {
  width: 80%;
  margin: 0 auto;
}

.el-col-15 {
  margin: 0 auto;
  width: 100%;
  height: 350px;
  padding: 5px;
  overflow: hidden;
  text-align: center;
  // border: 1px solid skyblue;
  background: #fff;
  border-radius: 10px;

  .el-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
//缩略图
.el-col-8 {
  padding: 5px;
  margin-left: 10px;
  // border: 1px solid skyblue;
  background: #fff;
  border-radius: 10px;

  .thumbnail {
    height: 180px;

    .el-col-24 {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      overflow: hidden;
      width: 100%;
      height: 100%;
      .el-image {
        height: 48%;
        width: 48%;
        object-fit: convert;
      }
    }
  }
  //价格
  .price {
    margin: 10px;
    font-size: 14px;
    text-align: center;
    span {
      color: red;
      font-size: 16px;
      font-weight: 700;
    }
  }

  //
  .personage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 14px;
  }
  .el-image{
    text-align: center;
 /deep/#avatar {
    width: 45%;
    height: 45%;
  }
  }
 
}

//房产介绍
.homeIntroduce {
  margin-top: 20px;
  padding: 5px;
  // border: 1px solid skyblue;
  background: #fff;
  border-radius: 10px;

  h4 {
    // color: skyblue;
    margin: 10px;
  }
  /deep/p {
    text-indent: 2em;
    margin: 0px;
    padding: 0px 10px;
  }
}
</style>

